<!-- Dom模板 -->
<template>
  <div class="home">
    <!-- Dom内容 -->
    <div class="home_top">
      <div></div>
      <div>{{ item ? item.username : "商铺管理员" }}</div>
      <div></div>
    </div>
    <div class="home_bottom">
      <div class="home_left">
        <div
          v-for="(item, index) in userList"
          :key="index"
          @click="xuanuser(item)"
          class="userlist"
        >
          <img
            src="https://cdn.jsdelivr.net/gh/zmf-6/cdn//img/portraits.png"
            alt=""
          />
          <p>{{ item.username }}</p>
        </div>
      </div>
      <div class="home_right">
        <div class="show" ref="show">
          <!-- <img src="" alt="" class="homeimg" v-if="item" /> -->
        </div>
        <div class="tomessage">
          <div class="gengd">
            <span class="icon iconfont icon-biaoqing"></span>
          </div>
          <textarea
            cols="50"
            rows="10"
            class="area"
            placeholder="在这里输入内容..."
            ref="input"
            v-model="val"
          ></textarea>
          <el-row class="er_row">
            <el-button type="success" @click="Focus">发送</el-button>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import a from './a'; // 引入组件
import * as API from "../../api/index";
import Storage from "../../components/encapsulation/Storage";
import webSocket from "../../utils/webSocket";
export default {
  name: "",
  data() {
    return {
      msg: "测试",
      val: "",
      username: "",
      item: "",
      data: "",
      userList: []
    };
  },
  //组件的挂载
  components: {},
  // Vue方法定义
  methods: {
    async xuanuser(item) {
      let res = await API.getMessage({
        uid: JSON.parse(localStorage.getItem("token")).uid,
        Toid: item.uid
      });
      console.log(res);
      this.data = res.data;
      this.item = item;
      localStorage.setItem("item", JSON.stringify(item));
      let show = ``;
      res.data.forEach((item, index) => {
        //   默认渲染
        if (item.uid === 35) {
          if (item.img) {
            show += `<div class="user_message" style="
            width: 100%;
            font-size: 20px;
            display: flex;
            align-items: center;
            justify-content: flex-end;"><span>${item.mess}</span>:<span><img src="
            ${item.img}
            " style=" width: 50px; height: 50px;"></img></span></div><br>`;
          } else {
            show += `<div class="user_message" style="
            width: 100%;
            font-size: 20px;
            display: flex;
            align-items: center;
            justify-content: flex-end;"><span>${item.mess}</span>:<span><img src="
            https://cdn.jsdelivr.net/gh/zmf-6/cdn//img/portraits.png
            " style=" width: 50px; height: 50px;"></img></span></div><br>`;
          }
        } else {
          if (item.img) {
            show += `<div class="user_message" style="
            width: 100%;
            font-size: 20px;
            display: flex;
            align-items: center;"><span><img src="
            ${item.img}
            " style=" width: 50px; height: 50px;"></img>:<span>${item.mess}</span></span></div><br>`;
          } else {
            show += `<div class="user_message" style="
            width: 100%;
            font-size: 20px;
            display: flex;
            align-items: center;"><span><img src="
            https://cdn.jsdelivr.net/gh/zmf-6/cdn//img/portraits.png
            " style=" width: 50px; height: 50px;"></img></span>:<span>${item.mess}</span></div><br>`;
          }
        }
      });
      this.$refs.show.innerHTML = show;
    },
    // 输入框获取焦点事件
    Focus() {
      this.xuanuser(this.item);
      let tha = this;
      //  点击发消息
      if (!tha.val) {
        tha.$message({
          message: "请输入要发送的消息...",
          type: "error"
        });
      } else {
        console.log(this.item_1);
        webSocket.send(
          JSON.stringify({
            // type值如果为message 表示要发送信息给客服
            type: "message",
            uid: JSON.parse(localStorage.getItem("token")).uid,
            Toid: JSON.parse(localStorage.getItem("item")).uid,
            //需要发送的内容
            mess: tha.val,
            // 发送消息的时间
            createTime: new Date() - 0
          })
        );
        tha.val = "";
      }
    }
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（访问DOM元素）
  async mounted() {
    let res = await API.getUserlist();
    console.log(res);
    this.userList = res.data;
    let tha = this;
    this.xuanuser(JSON.parse(localStorage.getItem("item")));
    this.$refs.input.onkeydown = function(e) {
      //   var ev = document.all ? window.event : e;
      console.log(e.keyCode);
      //回车
      if (e.keyCode == 13) {
        e.preventDefault(); //禁止键盘默认事件
        //  点击发消息
        if (!tha.val) {
          tha.$message({
            message: "请输入要发送的消息...",
            type: "error"
          });
        } else {
          console.log(tha.data);
          console.log(tha.item.uid);
          webSocket.send(
            JSON.stringify({
              // type值如果为message 表示要发送信息给客服
              type: "message",
              uid: JSON.parse(localStorage.getItem("token")).uid,
              Toid: JSON.parse(localStorage.getItem("item")).uid,
              //需要发送的内容
              mess: tha.val,
              // 发送消息的时间
              createTime: new Date() - 0
            })
          );
          tha.val = "";
        }
      }
    };
    // 监听服务器返回信息时执行
    webSocket.onmessage = function(obj) {
      let msg = JSON.parse(obj.data);
      // 首先判断该用户有没有登录 没有登录会返回--01
      if (msg.code === "01") {
        console.log("没有登录");
        alert("请先登录喔");
      } else {
        console.log("登录了");
        // 接收服务器返回的信息
        // 只有对应用户才能接收到
        console.log(msg);
        if (msg.uid === 35) {
          if (msg.img) {
            tha.$refs.show.innerHTML += `<div class="user_message" style="
            width: 100%;
            font-size: 20px;
            display: flex;
            align-items: center;
            justify-content: flex-end;"><span>${msg.mess}</span>:<span><img src="
            ${msg.img}
            " style=" width: 50px; height: 50px;"></img></span></div><br>`;
          } else {
            tha.$refs.show.innerHTML += `<div class="user_message" style="
            width: 100%;
            font-size: 20px;
            display: flex;
            align-items: center;
            justify-content: flex-end;"><span>${msg.mess}</span>:<span><img src="
            https://cdn.jsdelivr.net/gh/zmf-6/cdn//img/portraits.png
            " style=" width: 50px; height: 50px;"></img></span></div><br>`;
          }
        } else {
          if (msg.img) {
            tha.$refs.show.innerHTML += `<div class="user_message" style="
            width: 100%;
            font-size: 20px;
            display: flex;
            align-items: center;"><span><img src="
            ${msg.img}
            " style=" width: 50px; height: 50px;"></img>:<span>${msg.mess}</span></span></div><br>`;
          } else {
            tha.$refs.show.innerHTML += `<div class="user_message" style="
            width: 100%;
            font-size: 20px;
            display: flex;
            align-items: center;"><span><img src="
            https://cdn.jsdelivr.net/gh/zmf-6/cdn//img/portraits.png
            " style=" width: 50px; height: 50px;"></img></span>:<span>${msg.mess}</span></div><br>`;
          }
        }
      }
    };
  },
  // 生命周期 - 数据更新完成（访问DOM元素）
  updated() {},
  // 生命周期 - 组件销毁
  destroyed() {}
};
</script>

<style scoped>
/* @import url(''); 引入css类 */
@import url("../../components/font_zmf/iconfont.css");
.home_right {
  width: 100%;
  height: 100%;
  position: relative;
}
.tomessage {
  width: 100%;
  height: 140px;
  background: #fff;
  border-top: 1px solid #ccc;
  position: absolute;
  bottom: 0;
}
.show {
  width: 100%;
  height: calc(100% - 140px);
  overflow-y: auto;
}
.show::-webkit-scrollbar {
  width: 0px;
}
.gengd {
  width: 100%;
  height: 30px;
  padding: 5px 10px;
}
.gengd .icon {
  font-size: 25px;
}
.area {
  width: 95%;
  height: 45%;
  padding: 0 10px;
  resize: none;
  border: none;
  outline: none;
}
.area::-webkit-scrollbar {
  width: 0px;
}
.er_row {
  position: absolute;
  right: 5%;
  bottom: 10%;
}
.el-button--success {
  width: 50px;
  height: 20px;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.home {
  width: 100%;
  height: 100%;
  /* background: red; */
}
.home_top {
  width: 100%;
  height: 10%;
  background: lightpink;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.home_bottom {
  width: 100%;
  height: 90%;
  /* background: yellow; */
  display: flex;
}
.home_left {
  width: 200px;
  background: lightpink;
}
.home_right {
  width: calc(100% - 200px);
  max-width: 80%;
  background: rgb(236, 236, 233);
}
.userlist {
  width: 100%;
  height: 60px;
  font-size: 13px;
  font-weight: bold;
  display: flex;
}
.userlist img {
  width: 50px;
  height: 50px;
}

/* .home_shadow */
</style>
